<template>
    <div class="page">
        <div class="container">
            <div class="tab-list">
                <div
                    class="tab-item"
                    :class="{ active: activeTab == item.value }"
                    v-for="item in tabList"
                    :key="item.value"
                    @click="onTabClick(item)"
                >
                    {{ item.label }}
                </div>
            </div>

            <div class="message-total">共{{ pagination.total }}条内容</div>

            <div class="notice-list" v-if="activeTab == 4">
                <template v-for="item in list" :key="item.id">
                    <div class="notice-item" v-if="item.about_json.status == 2">
                        <p>尊敬的{{ userStore.userInfo.mobile }}用户：</p>
                        <p>您好！</p>
                        <p>
                            非常遗憾地通知您，您在华锐云空间提交的作品未能通过审核。审核不通过的原因如下：{{
                                item.about_json.reason || "-"
                            }}
                        </p>
                        <p>
                            请您根据反馈意见进行相应的修改和调整后，重新提交审核。我们期待您修改后的作品能够符合要求。
                        </p>
                        <p>感谢您对我们华锐云空间的支持与理解。</p>
                    </div>
                    <template v-else>
                        <div class="notice-item" v-if="item.id % 2 == 0">
                            尊敬的{{
                                userStore.userInfo.mobile
                            }}用户：特此通知您，您于华锐云空间提交的作品审核通过啦！您的作品将进入华锐云空间的展示序列，愿它能收获众多好评。感谢您选择华锐云空间，祝您使用愉快。
                        </div>
                        <div class="notice-item" v-else>
                            <p>尊敬的{{ userStore.userInfo.mobile }}用户：</p>
                            <p>您好！</p>
                            <p class="mb-10">
                                恭喜您，在华锐云空间提交的作品已通过审核。我们对您的创作表示认可和赞赏。您的作品将在华锐云空间展示，期待它能收获更多的关注与喜爱。感谢您的参与，华锐云空间与您一同成长。
                            </p>
                            <!-- <p>华锐云空间</p> -->
                        </div>
                    </template>
                </template>
            </div>

            <div class="message-list" v-loading="isLoading" v-else>
                <template v-if="pagination.total > 0">
                    <div
                        class="message-item"
                        v-for="(item, index) in list"
                        :key="item.id"
                        ref="messageItemRef"
                    >
                        <div class="avatar">
                            <img
                                :src="
                                    item.user.avatar ||
                                    `${_oss_}images/user/default-avatar.png`
                                "
                            />
                        </div>

                        <div class="message-info">
                            <div class="info-cell info-cell-1">
                                <div class="username">
                                    {{ item.user.mobile }}
                                </div>
                                <div class="text">
                                    {{
                                        { 1: "评论", 2: "点赞", 3: "收藏" }[
                                            activeTab
                                        ]
                                    }}了你的作品
                                </div>
                                <div class="time">{{ item.createtime }}</div>
                            </div>
                            <div
                                class="info-cell info-cell-2"
                                v-if="activeTab == 1"
                                v-html="formatComment(item.comment)"
                            ></div>
                            <div
                                class="info-cell info-cell-3"
                                @click="GoToWork(item)"
                            >
                                {{ item.work.name }}
                            </div>

                            <div class="comment-tools" v-if="activeTab == 1">
                                <CommentReplyWorkM
                                    :commentId="item.id"
                                    :toUid="item.uid"
                                    :toUName="
                                        item.user.nickname || item.user.mobile
                                    "
                                    :workId="item.work_id"
                                    @success="GetReply(index)"
                                />
                            </div>

                            <div v-if="activeTab == 1">
                                <CommentReplyWorkListM
                                    :commentId="item.id"
                                    :workId="item.work_id"
                                    :list="item.reply"
                                    :authorId="userStore.userInfo.id"
                                    @replySuccess="GetReply(index)"
                                    @del="(item) => onDelReply(item, index)"
                                    v-if="item.reply && item.reply.length"
                                />
                            </div>
                        </div>
                    </div>
                </template>

                <el-empty :image-size="150" v-else-if="!isLoading" />
            </div>
        </div>
    </div>

    <DialogCommentDelM
        v-model:show="isShowDeleteDialog"
        :onConfirm="onDeleteConfirm"
    />
</template>
<script setup>
import { useContent } from ".";
const userStore = useUserStore();
const {
    list,
    tabList,
    activeTab,
    pagination,
    isLoading,
    isShowDeleteDialog,
    onTabClick,
    GetList,
    SetRead,
    GoToWork,
    GetReply,
    pageChangeHandle,
    formatComment,
    onDelReply,
    onDeleteConfirm,
} = useContent();

const messageItemRef = ref([]);

onMounted(async () => {
    await nextTick();

    const observer = new IntersectionObserver(async function ([node]) {
        if (
            node.isIntersecting &&
            pagination.size * pagination.page < pagination.total
        ) {
            pageChangeHandle(pagination.page + 1);
        }
    });

    watch(messageItemRef.value, function () {
        if (pagination.size * pagination.page < pagination.total) {
            observer.observe(
                messageItemRef.value[messageItemRef.value.length - 1]
            );
        }
    });

    await GetList();
    await SetRead();
});
</script>
<style lang="scss" scoped>
.page {
    background-color: #edf5fa;

    .container {
        width: 100%;
        margin: 0 auto;
        padding: 0 16px 16px;
        background-color: #fff;
        box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
        border-radius: 2px;

        .tab-list {
            display: flex;

            .tab-item {
                line-height: 40px;
                text-align: center;
                margin-right: 40px;
                color: #777888;
                user-select: none;
                cursor: pointer;

                &.active {
                    font-weight: 500;
                    color: #222226;
                    border-bottom: 2px solid #222226;
                }
            }
        }

        .message-total {
            font-size: 14px;
            color: #999aaa;
            line-height: 20px;
            margin-top: 15px;
            margin-bottom: 8px;
        }

        .notice-list {
            .notice-item {
                color: #333;
                font-size: 14px;
                line-height: 1.5em;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                border-radius: 10px;
                padding: 20px;
                margin: 16px 0;
            }
        }

        .message-list {
            .message-item {
                display: flex;
                align-items: flex-start;
                margin: 16px 0;

                .avatar {
                    width: 42px;
                    height: 42px;
                    border-radius: 4px;
                    overflow: hidden;
                    flex-shrink: 0;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .message-info {
                    width: 100%;
                    margin-left: 10px;
                    font-size: 14px;

                    .username {
                        color: #222226;
                        margin-right: 8px;
                    }

                    .info-cell {
                        margin-bottom: 6px;
                        line-height: 20px;

                        &:last-of-type {
                            margin-bottom: 0;
                        }

                        &-1 {
                            display: flex;
                            color: #99a;

                            .time {
                                margin-left: auto;
                            }
                        }

                        &-2 {
                            display: flex;
                            align-items: center;
                            flex-wrap: wrap;
                            font-size: 14px;
                            line-height: 20px;
                            color: #111;
                            margin-top: 10px;
                            word-wrap: break-word;
                            word-break: break-word;
                            padding-right: 20px;

                            :deep(img[emoji-icon]) {
                                width: 24px;
                                height: 24px;
                            }
                        }

                        &-3 {
                            color: #888;
                        }
                    }
                }
            }
        }
    }
}

.pagination-box {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    user-select: none;

    :deep(.el-pager) {
        li {
            width: 32px;
            height: 30px;
            border-radius: 6px;
            background-color: #fff;
            font-size: 16px;
            font-weight: 500;
        }
    }

    :deep(.el-pagination) {
        &.is-background {
            .btn-next,
            .btn-prev {
                background-color: #fff;
                padding: 0 10px;
                border-radius: 6px;
            }
        }
    }
}
</style>
